<template>
  <!-- 购物袋商品组件 -->
  <div class="pro-list">
    <van-swipe-cell :disabled="!isSlide"><!-- 取反是因为这个是属性代表禁止滑动，组件默认可以滑动，我们通过传入isSlide来控制是否滑动 -->
      <div class="pro-info">
        <!-- <div class="pro-checkbox">
          <van-checkbox v-model="proData.checked" checked-color="#ff594d" @change="simpleSelect"></van-checkbox>
        </div> -->
        <!-- 复选框插槽（为了复用于订单界面，复选框已经被独立） -->
        <slot name="checkbox"></slot>
        <div class="pro-img">
          <img class="auto-img" :src="proData.small_img" alt="">
        </div>
        <div class="pro-box">
          <div class="pro-name">
            <div class="pro-t1">
              <div class="pro-zhname one-text">{{proData.name}}</div>
              <div class="pro-rule one-text">{{proData.rule}}</div>
            </div>
            <div class="pro-enname one-text">{{proData.enname}}</div>
          </div>
          <div class="pro-price">
            <div class="p-price">&yen;{{proData.price}}</div>
            <div class="p-count">
              <!-- 进步器插槽 -->
              <slot name="stepper"></slot>
              <!-- 数量插槽 -->
              <slot name="count"></slot>
            </div>
          </div>
        </div>
      </div>
      <template #right>
        <van-button @click="remove" square type="danger" text="删除" />
      </template>
    </van-swipe-cell>
  </div>
</template>





<script>
export default {
  name: "ProList",

  props: {
    proData: {
      type: Object,
      default() {
        return {};
      },
    },
    // 是否滑动单元格
    isSlide: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      checked: true,
    };
  },

  methods: {
    //单选
    simpleSelect() {
      this.$emit("simpleSelect");
    },

    //删除商品
    remove() {
      this.$emit("remove");
    },
  },
};
</script>





<style lang="less" scoped>
/deep/ .van-swipe-cell__right .van-button--danger {
  height: 100%;
}
/deep/ .van-button--danger {
  border-color: transparent;
  box-sizing: border-box;
}

.pro-list {
  padding: 10px;
  background-color: #fff;
  color: #333;

  .pro-price {
    display: flex;
    align-items: center;
  }

  .p-price {
    margin-right: auto;
    color: #e4393c;
    font-size: 14px;
    font-weight: bold;
  }

  .p-count {
    margin-right: 10px;
  }

  .pro-t1 {
    display: flex;
    align-items: center;
  }

  .pro-zhname {
    font-size: 14px;
    margin-right: 10px;
  }

  .pro-rule {
    color: #999;
  }

  .pro-enname {
    margin-top: 3px;
    max-width: 221px;
    color: #999;
  }

  .pro-info {
    display: flex;
    align-items: center;
  }

  .pro-img {
    width: 70px;
    height: 70px;
    margin: 0 10px;
  }

  .pro-name,
  .pro-price {
    height: 35px;
  }

  .pro-box {
    flex: 1;
  }
}
</style>